zizhujianzhan_web/pages/[dir]/[id].vue

<template>
    <!-- 头部 -->
    <templateHead></templateHead>
    <!-- 菜单 -->
    <templateMenu></templateMenu>
    <!-- 内容 -->
    <div>
        <!--广告组件-->
        <templateAd :adTag="'nmw_detail_0001'" :skinId="skinId" :adData="adData"></templateAd>
        <!--资讯正文-->
        <templateArticle :skinId="skinId" :templateData="testTemplateData" :articleData="articleData" :routeId="routeId"></templateArticle>
    </div>
    <!-- 底部 -->
    <templateFoot></templateFoot>
</template>

<script setup>
//0.加载全局模板组件 start---------------------------------------->
//0.1全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
//0.2局部通栏
//0.2.1广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2资讯正文通栏
import templateArticle from '@/components/template/sector/body/article/article/1200x1710/1.vue'
//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref, onMounted } from 'vue';
//1.2使用url查询导航池id
const targetSegment = getRoutePath(1);//当前页面的url路径 这是第一层 所以获得域名后面的第一层url
const routeId = ref("");//当前url路径代表的cid
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if (getRouteId.code == 200) {
    routeId.value = getRouteId.data.category_id
}

//1.3获得二级导航
const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
    method: 'GET',
    query: {
        'placeid': 1,
        'pid': routeId.value,
        'num': 8
    },
});
//1.4获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore = useTemplateBaseStore()
//1.5获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref("")
//1.6获得站点基本信息
const responseStatus = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    //1.6.1设置站点基本信息
    templateBaseStore.setWebSiteInfo(responseStatus.data)
    //1.6.2设置皮肤id
    skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
}
//1.7获得广告池
const adData = ref([]);
const adResponseStatus = await requestDataPromise('/web/getWebsiteAdvertisement', {
    method: 'GET',
    query: {},
});
if (adResponseStatus.code == 200) {
    templateBaseStore.setAdList(adResponseStatus.data)
    adData.value = adResponseStatus.data;
}
//1.8.seo
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': routeId.value
    },
});
let seoTitle = setData.data.seo_title;
let seoDescription = setData.data.seo_description;
let seoKeywords = setData.data.seo_keywords;
let seoSuffix = setData.data.suffix;
let seoName = setData.data.website_name;
useSeoMeta({
    title: seoTitle + "_" + seoSuffix,
    meta: [
        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
        { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
    ]
});
//1.获得基本信息单元 end---------------------------------------->

//2.获得页面数据 start---------------------------------------->
//2.0 测试数据 后期移除
const articleData = {
    "code": 200,
    "message": "success",
    "data": {
        "id": null,
        "catid": 315,
        "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
        "tag": "",
        "keyword": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
        "author": "lin",
        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
        "fromurl": "",
        "hits": 0,
        "ip": "114.255.249.227, 127.0.0.1",
        "status": 1,
        "islink": 0,
        "linkurl": "",
        "imgurl": "http://img.bjzxtw.org.cn/pre/image/png/20250620/1750408152809621.png",
        "admin_user_id": 79,
        "cat_arr_id": "[28,315]",
        "created_at": "2025-03-19 13:58:49",
        "updated_at": "2025-07-15 17:10:29",
        "is_original": 1,
        "survey_id": "",
        "survey_name": "",
        "is_survey": 0,
        "survey_type": 0,
        "web_site_id": "2",
        "ignore_ids": null,
        "reason": null,
        "department_arr_id": "[]",
        "department_id": 0,
        "city_arr_id": "[]",
        "city_id": 0,
        "level": "[2]",
        "commend_id": "[3505]",
        "level_text": "[2]",
        "article_id": null,
        "content": "<p>新华社北京3月18日电　3月18日，国家副主席韩正在北京会见英国伦敦金融城市长靳翊伟。</p><p>韩正表示，伦敦金融城是世界著名金融中心，为推动中英金融、经贸领域合作作出积极贡献。中国和英国同为世界主要经济体，合作互补性强、前景广阔。无论世界如何变化，中国内外政策都会保持连贯性。中方愿同英方秉持战略伙伴定位，加强沟通合作，共同推动世界多极化、经济全球化，落实好两国领导人达成的重要共识，使中英合作成果更好惠及两国和世界。</p><p>靳翊伟表示，英中在绿色经济、可持续金融、可再生能源领域合作前景巨大。伦敦金融城欢迎更多中资企业赴伦敦发展兴业，愿全力提供支持和便利。</p>",
        "website_url": null,
        "email": null,
        "contacts": null,
        "contacts_mobile": null,
        "contacts_address": null,
        "zip_code": null,
        "enterprise_name": null,
        "category_id": 315,
        "cat_name": "三农专题",
        "website_name": "三农资讯网-测试专用",
        "suffix": "全国三农信息一体化应用平台",
        "commendArticle": [
            {
                "id": 3505,
                "title": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                "catid": 1,
                "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                "hits": 0,
                "created_at": "2025-02-19 20:30:35"
            }
        ]
    }
}

//2.0 测试数据 后期移除
const testTemplateData = {
    "sectorName": "text",
    "componentList": [
        {
            "component_type": 1,//1=新闻 2=广告
            "component_style": 1,//样式
            "sort": 1,//组件位置
            "data": {
                "alias":"一级导航名称",
                "category_id": 11,
                "pinyin": "nongyeshengchan",
                "text": [
                    {
                        "id": 2863,
                        "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminxinnongcun/nongcunxinfangshe"
                    },
                    {
                        "id": 50129,
                        "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 2862,
                        "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun/buweidongtai"
                    },
                    {
                        "id": 50126,
                        "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 3976,
                        "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50189,
                        "title": "7以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminhezuoshe"
                    },
                    {
                        "id": 50190,
                        "title": "8以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminhezuoshe"
                    }
                ],
                "img": [
                    {
                        "id": 50129,
                        "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "linyuting123",
                        "updated_at": "2025-05-30 13:50:54",
                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "cat_arr_id": "[1,201]",
                        "catid": 201,
                        "level": "[1,2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:46",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[2]",
                        "catid": 2,
                        "level": "[2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:45",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[1]",
                        "catid": 1,
                        "level": "[2]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:44",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[11]",
                        "catid": 11,
                        "level": "[2]",
                        "pinyin": "xinnongcun"
                    },
                    {
                        "id": 50129,
                        "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:43",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[14,240]",
                        "catid": 240,
                        "level": "[2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-04-16 11:04:29",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": null,
                        "catid": 36,
                        "level": "[2]",
                        "pinyin": "sannongzixun"
                    }
                ]
            }
        },
        {
            "component_type": 1,//1=新闻 2=广告
            "component_style": 1,//样式
            "sort": 1,//组件位置
            "data": {
                "alias":"最新资讯",
                "category_id": 11,
                "pinyin": "sannongzixun/zhengcefagui",
                "text": [
                    {
                        "id": 2863,
                        "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminxinnongcun/nongcunxinfangshe"
                    },
                    {
                        "id": 50129,
                        "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 2862,
                        "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun/buweidongtai"
                    },
                    {
                        "id": 50126,
                        "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 3976,
                        "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50189,
                        "title": "7以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminhezuoshe"
                    },
                    {
                        "id": 50190,
                        "title": "8以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminhezuoshe"
                    }
                ],
                "img": [
                    {
                        "id": 50129,
                        "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "linyuting123",
                        "updated_at": "2025-05-30 13:50:54",
                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "cat_arr_id": "[1,201]",
                        "catid": 201,
                        "level": "[1,2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:46",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[2]",
                        "catid": 2,
                        "level": "[2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:45",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[1]",
                        "catid": 1,
                        "level": "[2]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:44",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[11]",
                        "catid": 11,
                        "level": "[2]",
                        "pinyin": "xinnongcun"
                    },
                    {
                        "id": 50129,
                        "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:43",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[14,240]",
                        "catid": 240,
                        "level": "[2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-04-16 11:04:29",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": null,
                        "catid": 36,
                        "level": "[2]",
                        "pinyin": "sannongzixun"
                    }
                ]
            }
        },
        {
            "component_type": 1,//1=新闻 2=广告
            "component_style": 1,//样式
            "sort": 3,//组件位置
            "data": {
                "alias":"热点精选",
                "category_id": 11,
                "pinyin": "sannongzixun/zhengcefagui",
                "text": [
                    {
                        "id": 2863,
                        "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminxinnongcun/nongcunxinfangshe"
                    },
                    {
                        "id": 50129,
                        "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 2862,
                        "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun/buweidongtai"
                    },
                    {
                        "id": 50126,
                        "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 3976,
                        "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50189,
                        "title": "7以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminhezuoshe"
                    },
                    {
                        "id": 50190,
                        "title": "8以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "pinyin": "nongminhezuoshe"
                    }
                ],
                "img": [
                    {
                        "id": 50129,
                        "title": "1以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "linyuting123",
                        "updated_at": "2025-05-30 13:50:54",
                        "introduce": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "cat_arr_id": "[1,201]",
                        "catid": 201,
                        "level": "[1,2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "2以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:46",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[2]",
                        "catid": 2,
                        "level": "[2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "3以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:45",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[1]",
                        "catid": 1,
                        "level": "[2]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "4以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:44",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[11]",
                        "catid": 11,
                        "level": "[2]",
                        "pinyin": "xinnongcun"
                    },
                    {
                        "id": 50129,
                        "title": "5以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-05-30 13:50:43",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": "[14,240]",
                        "catid": 240,
                        "level": "[2,3]",
                        "pinyin": "sannongzixun"
                    },
                    {
                        "id": 50129,
                        "title": "6以生态为内核推动文旅发展海南深山黎寨找到乡村振兴金钥匙6",
                        "imgurl": "http://img.bjzxtw.org.cn/dev/image/jpeg/20250220/1740044079754901.png",
                        "author": "佚名",
                        "updated_at": "2025-04-16 11:04:29",
                        "introduce": "描述",
                        "islink": 0,
                        "linkurl": "",
                        "copyfrom": "本网",
                        "cat_arr_id": null,
                        "catid": 36,
                        "level": "[2]",
                        "pinyin": "sannongzixun"
                    }
                ]
            }
        },
    ],
    "ad": {
        "ad_tag": "nmw_index_0003"
    }
}
//2.获得页面数据 end---------------------------------------->
</script>

<style lang="less" scoped>
@import url('@/assets/css/detail.less');
</style>